<template>
	<!-- 歌单详情 -->
	<div class="list">
		<link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_1533371_c1dh6bo4j1v.css" />
		<!-- 歌单头部 -->
		<div class="songBoss">
			<div class="songBackground" :style="songBackg">
		</div>
		</div>
		
		<div class="songListHead">
			<div class="lefter">
				<button @click="clicker"><i class="iconfont icon-fanhui"></i></button>
				<img :src="albumData.playlist.coverImgUrl" alt="">
			</div>
			<div class="righter">
				<p>{{albumData.playlist.name}}</p>
				<div class="songCenter">
					<img :src="albumData.playlist.creator.avatarUrl" alt="">
					<p>{{albumData.playlist.creator.nickname}}</p>
				</div>
			</div>
			<div class="backgroundImg">

			</div>
		</div>

		<div class="intro">
			<p>简介：{{albumData.playlist.description}}</p>
		</div>
		<div class="songListBox">
			<p>歌曲列表</p>
		</div>
		<song v-for="(item,index) in songList" :key="index" :songData="{
			songName:item.name,
			ar:item.ar,
			Img:item.al.picUrl,
			al:item.al.name,
			id:item.id,
			}"
		 :playList="listIdData" :curIindex="index"></song>

	</div>
</template>

<script>
	import api from '../js/api.js';
	import song from '../components/song.vue'

	export default {
		data() {
			return {
				albumData: {
					playlist: { //歌单头部信息
						coverImgUrl: '',
						creator: {
							avatarUrl: undefined,
							nickname: undefined,
						},
						description: undefined
					}
				},
				songList: [],
				listIdData: null,
				songBackg: null,
			}
		},
		components: {
			song
		},
		created() {
			this.axios({
				url: api.playlister + `?id=${this.$route.query.item}`
			}).then(res => {
				this.albumData = res.data;
				this.songList = res.data.playlist.tracks;
				this.listIdData = res.data.playlist.tracks.map(e => e.id);
				this.songBackg = "background-image: url(" + this.albumData.playlist.coverImgUrl + ");"
				window.console.log('歌单内容', this.songList);
			});
		},
		methods: {
			clicker() {
				this.$router.go(-1)
			}
		},

	}
</script>

<style lang="scss" scoped>
	.list {
		button {
			float: left;
			margin: 5px;
			background-color: white;

			i {
				font-size: 18px;
			}
		}
		.songBoss{
			width: 100%;
			box-sizing:border-box;    
			.songBackground {
			height: 180px;
			background-size: 100%;
			background-repeat: no-repeat;
			-webkit-filter: blur(10px);
			}
		}
		

		.songListHead {
			width: 100%;
			height: 180px;
			z-index: 800;
			margin-top: -180px;
			display: flex;
			justify-content: center;
			border-bottom: 0.5px solid skyblue;

			.lefter {
				width: 40%;
				z-index: 800;
				img {
					width: 100%;
					padding: 10px;
				}
			}

			.righter {
				width: 60%;
				margin: 10px;
				z-index: 800;
				font-size: 14px;
				text-align: left;
				padding-top: 30px;

				p {
					margin-bottom: 15px;
				}

				.songCenter {
					display: flex;
					justify-content: end;

					img {
						width: 11%;
						border-radius: 50%;
					}

					p {
						margin: 0;
						margin-left: 10px;
						line-height: 30px;
					}
				}

			}
		}

		.intro {
			z-index: 800;
			height: 31px;
			padding: 10px;
			font-size: 15px;
			text-align: left;
			overflow: hidden;
			transition-property: height;
			transition-duration: 1.0s;
		}

		.intro:hover {
			height: 120px;
		}

		.songListBox {
			padding: 5px;
			font-size: 14px;
			text-align: left;
			margin-top: 10px;
			background-color: #dfdddd;
		}

	}
</style>
